<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://github.com/whatwg/html/issues/9799">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>

<style>
#selecteditem {
  color: SelectedItemText;
  background-color: SelectedItem;
}
</style>
<div id=selecteditem>SelectedItem test colors</div>

<select style="appearance:base-select">
  <option class=one>one</option>
  <option class=two>two</option>
  <option class=three disabled>disabled</option>
</select>

<script>
const select = document.querySelector('select');
const optionOne = document.querySelector('.one');
const optionTwo = document.querySelector('.two');
const disabledOption = document.querySelector('.three');

promise_test(async () => {
  await new Promise(requestAnimationFrame);
  const selectedItemTestElement = document.getElementById('selecteditem');
  const selectedItemTextColor = getComputedStyle(selectedItemTestElement).color;
  const selectedItemColor = getComputedStyle(selectedItemTestElement).backgroundColor;

  await test_driver.bless();
  select.showPicker();
  assert_true(select.matches(':open'),
    'dropdown should open after calling showPicker().');

  await (new test_driver.Actions()
    .pointerMove(1, 1, {origin: optionOne}))
    .send();
  await new Promise(requestAnimationFrame);

  assert_equals(getComputedStyle(optionOne).color, selectedItemTextColor,
    'The hovered option should have color:SelectedItemText.');
  assert_equals(getComputedStyle(optionOne).backgroundColor, selectedItemColor,
    'The hovered option should have background-color:SelectedItem.');
  // SelectedItemTextColor might be the same as the default text color, so
  // don't test that optionTwo's color isn't selectedItemTextColor.
  assert_not_equals(getComputedStyle(optionTwo).backgroundColor, selectedItemColor,
    'The not hovered option should not have background-color:SelectedItem.');

  const disabledColor = getComputedStyle(disabledOption).color;
  const disabledBackgroundColor = getComputedStyle(disabledOption).backgroundColor;

  await (new test_driver.Actions()
    .pointerMove(1, 1, disabledOption))
    .send();
  await new Promise(requestAnimationFrame);

  assert_equals(getComputedStyle(disabledOption).color, disabledColor,
    'Disabled options should not change color when hovered.');
  assert_equals(getComputedStyle(disabledOption).backgroundColor, disabledBackgroundColor,
    'Disabled options should not change background-color when hovered.');
}, 'Hover styles should be present for appearance:base-select options.');
</script>
